<template>
  <div class="song-list-album">
    <div class="album-slide">
      <div class="album-img">
        <el-image style="width: 100%;height: 300px;" :fit="fits" :src="attachImageUrl(songListDetail.pic)"></el-image>
      </div>
      <div class="album-info">
        <h2>简介：</h2>
        <span>
          {{songListDetail.introduction}}
        </span>
      </div>
    </div>
    <div class="album-content">
      <div class="album-title">
        <p>{{songListDetail.title}}</p>
      </div>
      <div class="album-score">
        <div>
          <h3>歌单评分：</h3>
          <div>
            <el-rate :max="5" v-model="average" disabled></el-rate>
          </div>
        </div>
        <span>{{average*2}}</span>
        <div>
          <h3>评价：</h3>
          <div @click="setRank">
            <el-rate v-model="rank" allow-half show-text></el-rate>
          </div>
        </div>
      </div>
      <div class="songs-body">
        <album-content :songList="listOfSongs">
          <template slot="title">歌单</template>
        </album-content>
               <comment :type="1"></comment>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    mixin
  } from '../mixins';
  import {
    mapGetters
  } from 'vuex';
  import Comment from "../components/Comment";
  import AlbumContent from "../components/AlbumContent";
  export default {
    mixins: [mixin],
    components: {
      AlbumContent,
      Comment
    },
    data() {
      return {
        fits: 'cover',
        id: '',
        songLists: [], //当前页面需要展示的歌曲列表
        songListDetail: {
          id: '',
          title: '',
          pic: '',
          introduction: '',
          style: '',
        },

        rankc: {
          song_list_id: '',
          consumer_id: '',
          score: '',
        },

        song_list_id: '', //前面传来的歌单id
        average: 0, //平均分
        rank: 0 //提交评价的分数
      }
    },
    computed: {
      ...mapGetters([
        'listOfSongs', //当前播放列表
        'tempList', //当前歌单对象
        'loginIn', //用户是否已登录
        'userId', //当前登录用户id
      ])
    },
    created() {
      this.id = this.$route.query.id;
      this.getRequest("/songList/updateClick?id=" + this.id).then((res) => {});
      this.getList();
      this.getSongId();

      this.getRank(this.song_list_id);
    },
    methods: {
      //获取歌单信息
      getList() {
        const _this = this;
        _this.id = _this.$route.query.id;
        this.getRequest("/songList/selectByPrimaryKey?id=" + _this.id).then((res) => {
          _this.songListDetail = res.data;
        })
      },
      //获取当前歌单的歌曲列表
      getSongId() {
        const _this = this;
        _this.song_list_id = _this.$route.query.id;
        this.getRequest("/listSong/detail?song_list_id=" + _this.song_list_id).then((res) => {
            for (let item of res.data) {
              this.getSongList(item.id);
            }
            this.$store.commit('setListOfSongs', this.songLists);
          })
          .catch(err => {
            console.log(err)
          })
      },
      //根据歌曲id获取歌曲信息
      getSongList(songId) {
        this.getRequest("/song/detail?songId=" + songId).then((res) => {
            this.songLists.push(res.data);
          })
          .catch(err => {
            console.log(err)
          })
      },
      //获取歌单评分
      getRank(id) {
        this.getRequest("/rank/avgRank?song_list_id=" + this.song_list_id).then((res) => {
            this.average = res.data / 2;
          })
          .catch(err => {
            console.log(err)
          })
      },
      //提交评分
      setRank() {
        const _this = this;
        if (this.loginIn) {
          _this.rankc.song_list_id = _this.song_list_id;
          _this.rankc.consumer_id = _this.userId;
          _this.rankc.score = _this.rank * 2;
          this.postRequest("/rank/add", _this.rankc).then((res) => {
            if (res.data.code == 1) {
              _this.$notify({
                title: "评分成功",
                type: "success",
              });
              _this.getRank(_this.song_list_id);
            } else {
              _this.$notify({
                title: res.data.msg,
                type: "error",
              });
            }
          })
        } else {
          this.rank = null;
          _this.$notify({
            title: '请先登录',
            type: "error",
          });
        }
      }
    }
  }
</script>

<style scoped>
  /*歌单背景*/
  .song-list-album {
    margin-top: 0px;
    padding-top: 120px;
    background-color: #e6ecf0;


  }

  .song-list-album::before {
    /*背景*/
    content: "";
    background-color: #95d2f6;
    position: absolute;
    top: 0;
    width: 100%;
    height: 110px;
  }

  /*歌单左侧*/
  .album-slide {
    float: left;
    width: 400px;
  }

  /*歌单图像*/
  .album-slide .album-img {
    position: relative;
    display: inline-block;
    height: 200px;
    width: 200px;
    top: -30px;
    left: 50px;
    border-radius: 10%;
    overflow: hidden;
    border: 5px solid white;
    background-color: white;
  }

  .album-slide .album-img img {
    width: 100%;
  }

  /*歌单信息*/
  .album-slide .album-info {
    color: black;
    font-size: 20px;
    font-weight: 500;
    margin-top: -80px;
    padding: 30px 40px 30px 60px;
  }

  .album-info span {
    color: rgba(0, 0, 0, 0.5);
  }

  /*歌单内容*/
  .album-content {
    margin-left: 300px;
    padding: 0px 100px;
  }

  /*歌单打分*/
  .album-content .album-score {
    display: flex;
    align-items: center;
    margin: 40px;
  }

  .album-content .album-score div {

    margin-left: 0px;
  }

  .album-score h3 {
    margin: 10px 0;

  }

  .album-score span {
    font-size: 60px;
    margin-right: 100px;
  }

  /*歌单题目*/
  .album-content .album-title {
    font-size: 25px;
    font-weight: 600;
  }

  /*歌曲列表*/
  .album-content .songs-body {
    background-color: white;
    border-radius: 12px;
    padding: 0 40px 50px 40px;
    min-width: 700px;
  }
</style>
